<template>
	<view class="books" >
		<ul>
			<li v-for="item in bookList.slice(0,6)" @click="click(item.BookId)">
				<image :src="item.BookCover"></image>
				<p>{{item.BookName}}</p>
				<p class="author">{{item.BookAuthor}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	
	export default {
		name:"hot",
		props:{
			bookList:Array,
		},
		data() {
			return {
				
			};
		},
		methods:{
			click:function(BookId){
				uni.navigateTo({
				    url: '../../pages/details/details?BookId='+BookId
				});
			}
		},
		
			
	}
</script>

<style lang="scss">
	.books{
		width: 100px;
		height: 100px;
	}
	.books ul{
		width: 100vw;
		height: 56vh;
	}
	.books li{
		width: 30vw;
		height: 28vh;
		margin-left: 3vw;
		float: left;
	}
	.books li image{
		margin-left: 2vw;
		width: 25vw;
		height: 20vh;
		float: left;
	}
	.books p{
		margin-left: 2vw;
		width: 28vw;
		overflow: hidden;
		text-overflow:ellipsis; 
		white-space: nowrap;
		
	}
	.author{
		font-size: 12px;
		color: rgba(0,0,0,0.5);
	}
</style>
